<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
</head>

<body>
    <div id="app">
        Parent
        <button @click="add">{{count}}</button>
        <button @click="hideChild">hideChild</button>
        <child-component v-if="showChild" :count="count"></child-component>
    </div>
    <script src="vue.js"></script>
    <script>
        //在父组件里把值通过属性的方法向子组件传递
        var vm = new Vue({
            el: "#app",
            data() {
                return { count: 0, showChild: true };
            },
            methods: {
                add() {
                    this.count++;
                },
                hideChild() {
                    this.showChild = !this.showChild;
                }
            },
            beforeCreate() {
                console.log("Parent beforeCreate");
            },
            created() {
                console.log("Parent created");
            },
            beforeMount() {
                console.log("Parent beforeMount");
            },
            mounted() {
                console.log("Parent mounted");
            },
            beforeUpdate() {
                console.log(`Parent beforeUpdate`);
            },
            updated() {
                console.log(`Parent updated`);
            },
            beforeDestroy() {
                console.log(`Parent beforeDestroy`)
            },
            destroyed() {
                console.log(`Parent destroyed`)
            },
            components: {
                ChildComponent: {
                    props: ["count"], //在想在子组件使用到父组件传递过来的属性，需要通过props声明一下
                    template: `<div>Child {{count}} <grandson-component :count="count"></grandson-component></div>`,
                    beforeCreate() {
                        console.log("Child beforeCreate");
                    },
                    created() {
                        console.log("Child created");
                    },
                    beforeMount() {
                        console.log("Child beforeMount");
                    },
                    mounted() {
                        console.log("Child mounted");
                    },
                    beforeUpdate() {
                        console.log(`Child beforeUpdate`);
                    },
                    updated() {
                        console.log(`Child updated`);
                    },
                    beforeDestroy() {
                        console.log(`Child beforeDestroy`)
                    },
                    destroyed() {
                        console.log(`Child destroyed`)
                    },
                    components: {
                        GrandsonComponent: {
                            props: ["count"],
                            template: "<div>Grandson {{count}}</div>",
                            beforeCreate() {
                                console.log("Grandson beforeCreate");
                            },
                            created() {
                                console.log("Grandson created");
                            },
                            beforeMount() {
                                console.log("Grandson beforeMount");
                            },
                            mounted() {
                                console.log("Grandson mounted");
                            },
                            beforeUpdate() {
                                console.log(`Grandson beforeUpdate`);
                            },
                            updated() {
                                console.log(`Grandson updated`);
                            }
                            ,
                            beforeDestroy() {
                                console.log(`Grandson beforeDestroy`)
                            },
                            destroyed() {
                                console.log(`Grandson destroyed`)
                            },
                        },
                    },
                },
            },
        });
    </script>
</body>

</html>